import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:jetour_line/utils/extension_int.dart';

import '../../base_widget/base_image.dart';
import '../../base_widget/image_network_widget.dart';
import '../../my_colors.dart';
import "package:jetour_line/models/line_list_model.dart";

import '../../utils/page_push_utils.dart';
import '../line/lineDetail/line_detail_page.dart';

class LineItemWidget extends StatelessWidget {
  final ListElement line;
  Function? collectCallBack;
  LineItemWidget({Key? key, required this.line,this.collectCallBack}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    String img = line.logo;
    String caption = line.caption;
    bool isVip = line.vip;
    String? city;
    if (line.sceneCity != null) {
      city = line.sceneCity!.join(' - ');
    }
    String scor = '${line.score}分';
    String day = '${line.totalDay}天';
    String num = '${line.clickNum}';
    List<String>? tag;
    if (line.tag != null) {
      tag = line.tag!;
    }
    int tagCount = 0;
    if (tag != null && tag.isNotEmpty) {
      int txtLength = 0;
      for (int i = 0; i < tag.length; i++) {
        txtLength = tag[i].length + txtLength;
        if (txtLength > 13) {
          i = tag.length;
          continue;
        }
        tagCount++;
      }
    }
    return Padding(
      padding: EdgeInsets.only(left: 20.px, bottom: 20.px, right: 20.px),
      child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(4.px)),
        child: GestureDetector(
          onTap: () {
            PagePushUtils.push(
                context, LineDetailPageScreen(id: line.id,collectCallBack: collectCallBack,));
          },
          child: Container(
            width: double.infinity,
            height: 274.px,
            padding: EdgeInsets.all(24.px),
            color: MyColors.white,
            child: Row(
              children: [
                ImageNetworkWidget(
                  img,
                  height: double.infinity,
                  width: 190.px,
                  radius: 4.px,
                ),
                SizedBox(
                  width: 24.px,
                ),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text.rich(
                        TextSpan(children: [
                          if(isVip)
                            WidgetSpan(
                                child: Padding(
                                  padding: EdgeInsets.only(right: 10.px,bottom: 4.px),
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.all(Radius.circular(4.px)),
                                    child: Container(
                                      alignment: Alignment.center,
                                      width: 60.px,
                                      height: 30.px,
                                      color: MyColors.colorEE7219,
                                      child: Text('VIP',style: TextStyle(fontSize: 22.px,color: MyColors.white),),
                                    ),
                                  ),
                                )),
                          TextSpan(
                              text: caption,
                              style: TextStyle(
                                  fontSize: 30.px,
                                  color: MyColors.color333333)),
                        ]),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                      Expanded(
                          child: Container(
                            child: Row(
                              children: [
                                for (int i = 0; i < tagCount; i++)
                                  Container(
                                      padding: EdgeInsets.all(8.rpx),
                                      margin: EdgeInsets.only(right: 16.rpx),
                                      decoration: BoxDecoration(
                                          color: const Color(0xFFfff0e6),
                                          borderRadius:
                                          BorderRadius.circular(6.rpx)),
                                      child: Text(
                                        tag![i],
                                        style: TextStyle(
                                            fontSize: 20.rpx,
                                            color: const Color(0xffee7219)),
                                      ))
                              ],
                            ),
                          )),
                      if (city != null)
                        Text(city,
                            style: TextStyle(
                                fontSize: 26.px, color: MyColors.color999999),
                            maxLines: 1,
                            overflow: TextOverflow.ellipsis),
                      SizedBox(
                        height: 20.px,
                      ),
                      Row(
                        children: [
                          BaseImage(
                            image: 'ls_icon_starsel',
                            width: 36.px,
                            height: 36.px,
                          ),
                          SizedBox(
                            width: 5.px,
                          ),
                          Text(
                            scor,
                            style: TextStyle(
                                fontSize: 24.px, color: MyColors.color999999),
                          ),
                          SizedBox(
                            width: 19.px,
                          ),
                          BaseImage(
                            image: 'ls_icon_calendar',
                            width: 36.px,
                            height: 36.px,
                          ),
                          SizedBox(
                            width: 5.px,
                          ),
                          Expanded(
                              child: Text(
                                day,
                                style: TextStyle(
                                    fontSize: 24.px, color: MyColors.color999999),
                              )),
                          BaseImage(
                            image: 'ls_icon_browse',
                            width: 36.px,
                            height: 36.px,
                          ),
                          SizedBox(
                            width: 5.px,
                          ),
                          Text(
                            num,
                            style: TextStyle(
                                fontSize: 24.px, color: MyColors.color999999),
                          ),
                        ],
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
  // @override
  // State<LineItemWidget> createState() => _LineItemWidgetState();
}

// class _LineItemWidgetState extends State<LineItemWidget> {
//   @override
//   Widget build(BuildContext context) {
//     String img = widget.line.logo;
//     String caption = widget.line.caption;
//     bool isVip = widget.line.vip;
//     String? city;
//     if (widget.line.sceneCity != null) {
//       city = widget.line.sceneCity!.join(' - ');
//     }
//     String scor = '${widget.line.score}分';
//     String day = '${widget.line.totalDay}天';
//     String num = '${widget.line.clickNum}';
//     List<String>? tag;
//     if (widget.line.tag != null) {
//       tag = widget.line.tag!;
//     }
//     int tagCount = 0;
//     if (tag != null && tag.isNotEmpty) {
//       int txtLength = 0;
//       for (int i = 0; i < tag.length; i++) {
//         txtLength = tag[i].length + txtLength;
//         if (txtLength > 13) {
//           i = tag.length;
//           continue;
//         }
//         tagCount++;
//       }
//     }
//     return Padding(
//       padding: EdgeInsets.only(left: 20.px, bottom: 20.px, right: 20.px),
//       child: ClipRRect(
//         borderRadius: BorderRadius.all(Radius.circular(4.px)),
//         child: GestureDetector(
//           onTap: () {
//             PagePushUtils.push(
//                 context, LineDetailPageScreen(id: widget.line.id,collectCallBack: widget.collectCallBack,));
//           },
//           child: Container(
//             width: double.infinity,
//             height: 274.px,
//             padding: EdgeInsets.all(24.px),
//             color: MyColors.white,
//             child: Row(
//               children: [
//                 ImageNetworkWidget(
//                   img,
//                   height: double.infinity,
//                   width: 190.px,
//                   radius: 4.px,
//                 ),
//                 SizedBox(
//                   width: 24.px,
//                 ),
//                 Expanded(
//                   child: Column(
//                     crossAxisAlignment: CrossAxisAlignment.start,
//                     children: [
//                       Text.rich(
//                         TextSpan(children: [
//                           if(isVip)
//                           WidgetSpan(
//                               child: Padding(
//                             padding: EdgeInsets.only(right: 10.px,bottom: 4.px),
//                             child: ClipRRect(
//                               borderRadius: BorderRadius.all(Radius.circular(4.px)),
//                               child: Container(
//                                 alignment: Alignment.center,
//                                 width: 60.px,
//                                 height: 30.px,
//                                 color: MyColors.colorEE7219,
//                                 child: Text('VIP',style: TextStyle(fontSize: 22.px,color: MyColors.white),),
//                               ),
//                             ),
//                           )),
//                           TextSpan(
//                               text: caption,
//                               style: TextStyle(
//                                   fontSize: 30.px,
//                                   color: MyColors.color333333)),
//                         ]),
//                         maxLines: 2,
//                         overflow: TextOverflow.ellipsis,
//                       ),
//                       Expanded(
//                           child: Container(
//                         child: Row(
//                           children: [
//                             for (int i = 0; i < tagCount; i++)
//                               Container(
//                                   padding: EdgeInsets.all(8.rpx),
//                                   margin: EdgeInsets.only(right: 16.rpx),
//                                   decoration: BoxDecoration(
//                                       color: const Color(0xFFfff0e6),
//                                       borderRadius:
//                                           BorderRadius.circular(6.rpx)),
//                                   child: Text(
//                                     tag![i],
//                                     style: TextStyle(
//                                         fontSize: 20.rpx,
//                                         color: const Color(0xffee7219)),
//                                   ))
//                           ],
//                         ),
//                       )),
//                       if (city != null)
//                         Text(city,
//                             style: TextStyle(
//                                 fontSize: 26.px, color: MyColors.color999999),
//                             maxLines: 1,
//                             overflow: TextOverflow.ellipsis),
//                       SizedBox(
//                         height: 20.px,
//                       ),
//                       Row(
//                         children: [
//                           BaseImage(
//                             image: 'ls_icon_starsel',
//                             width: 36.px,
//                             height: 36.px,
//                           ),
//                           SizedBox(
//                             width: 5.px,
//                           ),
//                           Text(
//                             scor,
//                             style: TextStyle(
//                                 fontSize: 24.px, color: MyColors.color999999),
//                           ),
//                           SizedBox(
//                             width: 19.px,
//                           ),
//                           BaseImage(
//                             image: 'ls_icon_calendar',
//                             width: 36.px,
//                             height: 36.px,
//                           ),
//                           SizedBox(
//                             width: 5.px,
//                           ),
//                           Expanded(
//                               child: Text(
//                             day,
//                             style: TextStyle(
//                                 fontSize: 24.px, color: MyColors.color999999),
//                           )),
//                           BaseImage(
//                             image: 'ls_icon_browse',
//                             width: 36.px,
//                             height: 36.px,
//                           ),
//                           SizedBox(
//                             width: 5.px,
//                           ),
//                           Text(
//                             num,
//                             style: TextStyle(
//                                 fontSize: 24.px, color: MyColors.color999999),
//                           ),
//                         ],
//                       )
//                     ],
//                   ),
//                 )
//               ],
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }
